<template>
	<view class="container">
		<!-- 详情图片 -->
		<view class="detailImage">
			<image :src="URL + goods.img">
		</view>
		
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailPrice">
				<view class="detailPrice_left">
					<text>￥</text>
					<text>{{ goods.price }}</text>
					<text>￥{{ goods.market_price }}</text>
				</view>
				<view class="detailPrice_right" hover-class="touchOpacity">
					<image src="../../static/icon/follow.png"></image>
					<text>收藏</text>
				</view>
			</view>		
			<view class="detaildesc">
				<text>{{ goods.goodsname }}</text>
				<text>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</text>
			</view>
			<view class="detailslogan">11.11限时299元起</view>
			<view class="detaillook" hover-class="touchOpacity">
				<text>此商品于2020-11-11,结束闪购特卖，品牌美妆闪购专场</text>
				<text>查看 ></text>
			</view>
		</view>
		
		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<!-- 优惠券 -->
			<view class="ticketstage">
				<view class="ticketstage_title">领券</view>
				<view class="ticketstage_ticket">
					<view class="">100</view><view >50</view><view >20</view>
				</view>
			</view>
			<!-- 分期 -->
			<view class="ticketstage">
				<view class="ticketstage_title">分期</view>
				<view class="ticketstage_stage" hover-class="touchOpacity">
						<text @click="choiceStage">{{stage[value]}}</text>
						<text> > </text>
				</view>
			</view>
			
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">商品属性</label>
				</view>
				<view class="productGuige">
					<label>{{ goods.specsname }}</label>
					<view class="changethreed3i1"  v-for="(item,index) in  goods.specsattr" :key="index">{{ item }}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		 <view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<!-- 需要处理图片自适应问题 -->
			<!-- <image :src="productDetailImage.detailImage" mode="widthFix" style="width: 100%;" /> -->
			<rich-text :nodes="goods.description"></rich-text>
			<!-- v-html -->
		</view>
		
		<!-- 商品评价区域 -->
		<view class="productEval">
			<view class="eval">商品评价</view>
			<view v-for="(item,index) in evals" :key="index">
				<label class="evalUsername">{{item.name}}</label>
				<label class="evalUsertitle">{{item.title}}</label>					
				<view class="evalImage">
					<image v-for="(i,ind) in item.img" :key="ind" :src="i">
				</view>
				<label class="evalTime">{{item.time}}</label>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car" @click="goCartPage">
					<u-badge class="car-num" :count="cartCount" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCart">加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		</view>
		
		<!-- 分享给朋友 微信端 -->
		<!-- #ifdef MP-WEIXIN -->
			<view class="shareFriend" >
				<button type="default" open-type="share">
					<image src="../../static/icon/wxshare.png" mode=""></image>
				</button>
			</view>
			<!-- 客服 -->
			<view class="kefu">
				<button type="default" open-type="contact">
					<image src="../../static/icon/kefu.png"></image>
				</button>
			</view>
			
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stage:['可选3/6/12期','3期','6期','12期'],//分期默认值
				value:0,//默认分期提示
				cartCount:0,//初始化购物车右上角角标
				productDetailImage:{
					detailImage:"../../static/img/detail/2.jpg"
				},
				evals: [{  //评价内容
					name: '小李白',
					title: '效果很好，物流到位，下次继续来',
					img: ["../../static/img/detail/pingjia1.jpg","../../static/img/detail/pingjia1.jpg","../../static/img/detail/pingjia1.jpg","../../static/img/detail/pingjia1.jpg","../../static/img/detail/pingjia2.jpg","../../static/img/detail/pingjia3.jpg"],
					time: '2020-01-13'
				}],
				
				goods:{},// 获取商品信息
				URL:this.$URL,//服务器地址
			}
		},
		onLoad: function (options) {
			this.getGoods()
		},
		// 设置当前api。就可以分享给朋友
		onShareAppMessage() {
			return {
				title:"商品详情"
			}
		},
		methods: {
			goCartPage(){
				uni.switchTab({
					url:"../cart/cart"
				})
			},
			// 购物车添加
			async addCart(){
				// uid   goodsid   num   authorization
				// API:  cartadd 
				let app =  getApp();//获取全局变量
				let uid =  app.globalData.userInfo.uid;//获取用户唯一标识
				let header = app.globalData.header;//获取header头信息，包含了token
				let num = 1;//每次添加的个数
				let goodsid =  this.$mp.query.id; //商品id
				var option  = {
					url:"cartadd",
					data:{uid,goodsid,num},
					header,
					method:"post"
				}
				// 插入购物车
				let res =  await  this.$http(option);
				console.log(res)
				if(res.data.code ==200){
					// 插入成功
					this.$tips.showtoast('添加成功');
					this.cartCount =  res.data.list.cartCount
					
				}else if(res.data.code == 403){
					// 登录失效
					this.$tips.showtoast(res.data.msg);
					//提示是否登陆
					// 初始化 登陆状态
					// uni.clearStorageSync();//清空所有缓存
					// app.globalData.userInfo = {};
					// app.globalData.loginStatus = false;//未登录状态
					// app.globalData.header.authorization = null;//token设置为空
					this.$tips.restore(this,app)
				}
				
			},
			// 1.获取商品数据
			async getGoods(){
				let id =  this.$mp.query.id;
				var option = {
					url:"getgoodsinfo",
					data:{id}
				}
				let res = await this.$http(option);
				// console.log(res)
				res.data.list[0].specsattr = res.data.list[0].specsattr.split(",")
				this.goods = res.data.list[0];
			},
			
			
			// 分期事件
			choiceStage(){
				uni.showActionSheet({
					itemList:['3期','6期','12期'],
					itemColor:'#FF6040',
					success:res=>{
						this.value = res.tapIndex+1
					},
					fail:err=>{this.value=0}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 引入样式 */
	@import '@/static/css/gooddesc.scss';
</style>

